import { NText } from 'naive-ui';

import type { TableFieldProps } from '@/components/table/src/base-table-field';
import { BaseTableField } from '@/components/table/src/base-table-field';
import { renderIcon } from '@/utils/common';

export const IconTableField = defineComponent<TableFieldProps>({
  name: 'IconTableField',
  extends: BaseTableField,
  setup(props) {
    const iconComponentName = computed(() => {
      const value = props.rowData[props.field.key];
      if (value) {
        return value;
      }

      return props.field.defaultValue;
    });
    const options = computed(() => props.field.iconOptions);

    return () => {
      return iconComponentName.value
        ? (
            h('div', {
              class: 'flex justify-center items-center',
            }, renderIcon(iconComponentName.value, options.value?.size)())
          )
        : (
            <NText depth={3}>-</NText>
          );
    };
  },
});
